<template>
	<div class="play-lyrics" :class="{ active: isOpenLyrics }">
		<div class="mains">
			<div class="left">
				<div><img :src="musicData.al && musicData.al.picUrl + '?param=400y400'" alt=""></div>
			</div>
			<div class="right">
				<div class="title">{{ musicData.name }}</div>
				<div class="singer">歌手：<span>{{ musicData.al && musicData.al.name }}</span></div>
				<div class="lyrics">
					<!-- <p class="blod" v-for="(item, index) in musicLyric" :key="index">{{ item }}</p>s -->
					<p v-for="(item, index) in musicLyric" :key="index">{{ item }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { musicDetails, musicLyrics } from '@/network/playLyrics.js';
	export default {
		name: 'playLyrics',
		data() {
			return {
				isOpenLyrics: false,
				musicData: {},
				musicLyric: []
			}
		},
		computed:{
			isPlay(){
				return this.$store.state.currentPlayMusic;
			}
		},
		// 监听音乐播放
		watch:{
			isPlay() {
				let musicId = this.$store.state.musicList[this.$store.state.currentPlayMusic].id;
				// 获取歌手信息
				musicDetails(musicId).then(res => {
					this.musicData = res.data.songs[0];
				})
				// 获取歌词
				musicLyrics(musicId).then(res => {
					let lyr = {};
					let lyrics = res.data.lrc.lyric.split('[');
					// 提取歌词和时间
					lyrics.forEach(function(e) {
						let [key, value] = [e.split(']')[0].slice(0, -3), e.split(']')[1]];
						if (key) {
							lyr[key] = value;
						}
					})
					this.musicLyric = lyr;
				}) 
			}
		},
		methods: {
			openLyrics() {
				this.isOpenLyrics = !this.isOpenLyrics;
			}
		}
	}
</script>

<style style="less" scoped>
	.play-lyrics {
		position: fixed;
		top: 100vh;
		bottom: 66px;
		left: 0;
		right: 0;
		background: var(--main-color);
		z-index: 10;
		overflow: hidden;
		overflow-y: auto;
		transition: all .3s;
	}
	.active {
		top: 60px;
	}
	.mains {
		width: 1000px;
		height: 100%;
		margin: 0 auto;
		display: flex;
	}
	.mains .left {
		width: 400px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mains .left img {
		border: 10px solid var(--one-boder);
		width: 300px;
	}
	.mains .right {
		box-sizing: border-box;
		width: 600px;
		height: 100%;
		padding: 30px;
	}
	.right .title {
		font-size: var(--big-font-size);
		font-weight: 200;
	}
	.right .singer {
		margin-top: 25px;
		font-size: var(--small-font-size);
	}
	.right .singer span{
		color: #2B6CB0;
	}
	.right .lyrics {
		margin-top: 25px;
		height: 72%;
		overflow: auto;
		-webkit-mask-image: linear-gradient(
			180deg, 
			hsla(0,0%,100%,0), 
			hsla(0,0%,100%,.6) 15%,#fff 25%,#fff 75%,
			hsla(0,0%,100%,.6) 85%,
			hsla(0,0%,100%,0)
		);
		
	}
	.right .lyrics p {
		font-size: var(--second-font-size);
		margin: 20px 0;
	}
	.blod {
		font-weight: bold;
	}
</style>
